<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>动态签名生成器</title>
  <!-- 1. 引入 Vue3 -->
  <script src="https://unpkg.com/vue@3.5.13/dist/vue.global.js"></script>
  <style>
    body { font-family: Arial, sans-serif; margin: 40px; }
    .box { margin-bottom: 12px; }
    .sig { color: #409eff; font-weight: bold; font-size: 18px; }
  </style>
</head>
<body>
  <!-- 2. 容器 -->
  <div id="app">
    <h2>我的动态签名</h2>

    <!-- 个人信息 -->
    <div class="box">
      <label>昵称：</label>
      <input v-model="userInfo.nick" />
    </div>
    <div class="box">
      <label>账号：</label>
      <input v-model="userInfo.count" />
    </div>
    <div class="box">
      <label>性别：</label>
      <select v-model="userInfo.gender">
        <option :value="0">男</option>
        <option :value="1">女</option>
      </select>
    </div>
    <div class="box">
      <label>幸运色：</label>
      <input v-model="userInfo.color" />
    </div>
    <div class="box">
      <label>喜欢的小动物：</label>
      <input v-model="userInfo.animal" />
    </div>

    <div class="sig">签名：{{ signature }}</div>
  </div>

  <script>
    const { createApp, ref, computed, watch } = Vue;

    createApp({
      setup() {
        const userInfo = ref({
          nick: '齐天大圣',
          count: '88486556432564653213',
          gender: 0,    
          color: '黑红色',
          animal: '龙'
        });

        const signature = computed(() => {
          const { nick, gender, color, animal } = userInfo.value;
          return `我是${gender === 0 ? '男生' : '女生'}${nick}，${color}是我最爱的颜色，${animal}是我最爱的动物！`;
        });

        watch(signature, (newVal, oldVal) => {
          alert(`签名已更新！\n旧：${oldVal}\n新：${newVal}`);
        });

        return { userInfo, signature };
      }
    }).mount('#app');  
  </script>
</body>
</html>